function createBrowserHistory(props){
  const globalHistory = window.history;
  let listeners = [];

  //适配Prompt
  const confirm = props.getUserConfirmation?props.getUserConfirmation():window.confirm;
  let message; //如果使用<Prompt/>, 则该message为<Prompt/>接受的一个属性, 是一个方法属性（所接受的参数是：参看当前文件下面的push方法中传递的参数 ---> {pathname}）

  function go(n){
    globalHistory.go(n);
  }
  function goBack(){
    go(-1)
  }
  function goForward(){
    go(1)
  }
  function listen(listener){
    listeners.push(listener);
    return function(){//unlisten
      listeners = listeners.filter(l=>l!==listener);
    }
  }

  function notify(newHistory){
    Object.assign(history,newHistory);
    history.length = globalHistory.length;
    listeners.forEach(listener=>listener(history.location,history.action));//触发的是Router里的 this.setState, 也就是会让Router重新渲染
  }

  /**
   * @param {*} pathname 可能是对象，也可能是字符串
   * @param {*} state 这个路径的状态对象是什么,只是一个路径的描述信息，可以放任何
   */
  function push(pathname, state){
    const action = 'PUSH';//表示发了什么动作引起了路径变化 POP PUSH
    if(typeof pathname === 'object'){
      state=pathname.state;
      pathname= pathname.pathname;
    }
    if(message){ //适配prompt
      const showMessage = message({pathname});
      const allow = confirm(showMessage);
      if(!allow){
        return;
      }
    }
    globalHistory.pushState(state,null,pathname);
    const location = {state,pathname};
    notify({action,location});
  }

  function block(newMessage){
    message=newMessage/*← 这是个函数 见UserAdd.js  (location)=>`请问你确定要跳转到${location.pathname}吗?` */;
    return ()=> message=null;
  }

  /**
   * ↑ notify只会在调用我们封装的history.push时才会刷新渲染
   * 但我们期望 点击前进后退什么的 也触发, 就需要↓面的监听
   * */
  /*window.onpushstate = (event) => {
    console.log('onpushstate');
  }
  (function(history){
    const oldPushState = history.pushState;
    history.pushState = function(pathname, state){
      // eslint-disable-next-line prefer-rest-params
      const result = oldPushState.apply(history, arguments);
      if(typeof window.onpushstate){
        window.onpushstate(new CustomEvent('pushState', {detail: {pathname, state}}));
      }
      return result;
    }
  })(globalHistory)*/ //← 我们这里用了另一种实现的办法, 不用onpushstate, 会用监听onpopstate即可
  //
  //↓ 浏览器自带的
  window.onpopstate = (event) => {
    console.log('onpopstate',event)
    notify({action:'POP',location:{pathname:window.location.pathname/*←此时已经是最新的了*/,state:globalHistory.state}})
  }

  const history = {
    action: 'POP',
    go,
    goBack,
    goForward,
    listen,
    location:{pathname:window.location.pathname,state:globalHistory.state},
    push,
    block
  }
  return history;
}

export default createBrowserHistory;
